<template>
	<div class="search">
		<!-- 头部搜索框 -->
		<div class="search_input">
			<van-search shape="round" v-model.trim="searchKey" show-action placeholder="请输入搜索关键词">
				<template #left>
					<i class="iconfont icon-zuojiantou" @click="$router.back()"></i>
				</template>
				<template #action>
					<div @click="onSearch">搜索</div>
				</template>
			</van-search>
			<van-popup v-model="isShow" get-container=".search_input" position="top" style="height: auto;" round>
				<van-cell-group>
					<van-cell v-for="item in searchList" :key="item.id" :to="`/article/${item.id}`">
						<p>{{item.title}}</p>
					</van-cell>
				</van-cell-group>
			</van-popup>
			<div class="group">
				<!-- 历史记录 -->
				<div class="history">
					<h3 class="title">
						历史记录
						<i class="iconfont icon-lajitong" @click="clear"> </i>
					</h3>
					<div class="list his_list" v-bind="historyHeight">
						<span class="item" @click="setSearch(item)" v-for="(item , index) in searchHistroy"
							:key="index">{{item}}</span>
					</div>
				</div>
				<!-- 热门搜索 -->
				<div class="hotSearch">
					<h3 class="title">热门搜索</h3>
					<div class="list">
						<span class="item">头条</span>
						<span class="item">头条</span>
						<span class="item">头条</span>
						<span class="item">头条</span>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import {
		/* hotSearchRecommendApi, */
		SearchArticleApi,
	} from '../apis/news.js'
	import {
		setSEARCH_KEY,
		getSEARCH_KEY,
		removeSEARCH_KEY
	} from '../utils/localData.js'
	export default {
		data() {
			return {
				searchKey: '',
				searchList: [],
				searchHistroy: getSEARCH_KEY() || [],
				historyHeight: null,
				isShow: false
			}
		},

		methods: {
			async onSearch() {
				if (this.searchKey === '') return this.$toast.fail('请输入关键字')
				const searchRes = await SearchArticleApi({
					keyword: this.searchKey
				});

				this.searchList = searchRes.data.data;
				/* 历史记录 */
				this.searchHistroy.unshift(this.searchKey);
				/* ES6 new Set  */
				this.searchHistroy = [...new Set(this.searchHistroy)];
				if (this.searchHistroy.length > 10) return this.searchHistroy.pop();
				setSEARCH_KEY(this.searchHistroy);

				this.isShow = true;
			},

			setSearch(item) {
				this.searchKey = item;
			},

			clear() {
				this.searchHistroy = [];
				removeSEARCH_KEY();
			}

		},


		async created() {
			//const res = await hotSearchRecommendApi();
			//console.log(res);
		},







	}
</script>

<style lang="less" scoped>
	.van-cell-group {
		padding-top: 48px;

		.van-cell {
			margin: 10px 0;
		}

		.van-cell p {
			width: 100%;
			font-size: 15px;
			color: #555555;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}


	/deep/.van-popup {
		z-index: 1 !important;

	}

	/deep/.van-overlay {
		z-index: 1 !important;
	}

	.search {

		.search_input {

			/deep/.van-search {
				padding: 10px;
				position: relative;
				z-index: 9999;

				.icon-zuojiantou {
					padding-right: 10px;
				}
			}

		}


		.group {
			padding: 10px;

			.history {
				.his_list {
					border-bottom: 1px solid #cccccc;
					padding-bottom: 30px;
					margin-bottom: 20px;
				}
			}


			.hotSearch {}

			.title {
				font-size: 16px;
				color: #777777;
				margin: 10px 0;
			}

			.list {
				display: flex;
				flex-wrap: wrap;

				.item {
					padding: 5px;
					font-size: 13px;
					margin: 10px;
					border: 1px solid #dddddd;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>
